<template>
	<view>
		<u-navbar :border-bottom="false" :is-back="false" title="首页">
		</u-navbar>
		<view class="card mission-center-card">
			<view class="card-header">
				<view class="card-header-title">任务中心</view>
			</view>
			<view class="card-body flex mission-center">
				<view class="mission-center-item " @click="navigateTo('/pages/workflow/index?type=0')">
					<view class="mission-center-item-body mission-center-wait">
						<view>
							<u-count-to color="#ffffff" :font-size="43" :start-val="0" :end-val="workflowCount.todoCount"
								class="count">
							</u-count-to>
						</view>
						<view >待办流程</view>
					</view>
				</view>
				<view class="mission-center-item" @click="navigateTo('/pages/workflow/index?type=1')">
					<view class="mission-center-item-body mission-center-me">
						<view>
							<u-count-to color="#ffffff" :font-size="43" :start-val="0" :end-val="workflowCount.startCount"
								class="count"></u-count-to>
						</view>
						<view>我发起的</view>
					</view>
				</view>
				<view class="mission-center-item" @click="navigateTo('/pages/workflow/index?type=2')">
					<view class="mission-center-item-body mission-center-done">
						<view>
							<u-count-to color="#ffffff" :font-size="43" :start-val="0" :end-val="workflowCount.finishCount"
								class="count"></u-count-to>
						</view>
						<view>已办流程</view>
					</view>
				</view>
			</view>
		</view>
		<view class="card">
			<start-flow-list ref="todoList"/>
		</view>
		<u-tabbar :list="vuex_tabbar" ></u-tabbar>
	</view>
</template>

<script>
	import TodoList from '../workflow/todo/index.vue';
	import StartFlowList from '../workflow/StartFlowList.vue';


	export default {
		components: {
			TodoList,
			StartFlowList
		},
		data() {
			return {
				formName: '',
				msgList: [],
				collaboratorFormList: [],
				formList: [],
				workflowCount: {
					startCount: 0,
					todoCount: 0,
					finishCount: 0
				},
			};
		},
		onShow() {
			this.getAll()
			this.$refs.todoList.search()
		},
		onPullDownRefresh() {
			this.getAll()
			this.$refs.todoList.search()
		},
		methods: {
			getAll() {
				uni.showLoading({
					title: '加载中'
				});
				this.$u.api.getWorkflowCounts().then(res => {
					this.workflowCount = res
					uni.stopPullDownRefresh()
					uni.hideLoading()
				})
			},
			navigateTo(url) {
				uni.navigateTo({
					url: url
				});
			},
		}
	};
</script>
<style lang="scss">
	page {
		background-color: $u-bg-color;
	}
</style>
<style lang="scss" scoped>
	page {
		height: 100%;
		background-color: $u-bg-color;
	}

	.mission-center-card{
		margin-bottom: 0;
	}

	.mission-center {
		color: #fff;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: center;


		&-item {
			padding: 0 14.49rpx;
		}

		&-item-body{
			border-radius: 18.12rpx;
			overflow: hidden;
			padding: 27.17rpx;
			font-size: 25.36rpx;
		}

		&-title{
			padding-right: 18.12rpx;
		}

		&-wait {
			background-color: #BA69F4;
			width: 178.04rpx;
		}

		&-done {
			background-color: #AAA;
			width: 178.04rpx;
		}

		&-me {
			background-color: #4A81FD;
			width: 178.04rpx;
		}
	}
</style>
